Importante :
1- Os eventos disparados pelas tags HTML podem disparar scripts no JavaScript da página se eles existirem.
Contudo o script de tratamento de evento da tag HTML não é obrigatório, ou seja, o evento sempre ocorrerá mas se não
houver uma rotina para tratamento deles não irá ocorrer qualquer erro.
Definimos scripts para tratar apenas os eventos que nos interessam.
Portanto os eventos no Javascript são disparado pelos elementos do DOM da página corrente. Portanto o evento está amarrado a tag disparadora do evento.
2-Os eventos disparados pela janela(window) são eventos são associados a tag body. O mais famoso é o evento onresize ( repaint ou redraw ) da página que é disparado quando redimensionamos a largura da tela do browser e nesse evento toda a página é redesenhada e reexibida para a nova condição.
Toda a tag HTML tem os eventos globais abaixo mencionados.
Esses eventos são disparados ao entrar ou ao terminar totalmente a carga da página. Por exemplo, o evento onload é ótimo para inicializar os elementos da página quando esta é carregada.
| Atributo | Descrição |
|---|---|
| onafterprint | Script a ser executado após a impressão do documento |
| onbeforeprint | Script a ser executado antes da impressão do documento. |
| onbeforeunload | Script a ser executado quando o documento estiver prestes a ser descarregado |
| onerror | Script a ser executado quando ocorrer um erro |
| onhashchange | Script a ser executado quando houver alterações na parte âncora da URL |
| onload | Evento disparado após o carregamento da página |
| onmessage | Script a ser executado quando a mensagem é acionada. |
| onoffline | Script a ser executado quando o navegador começar a funcionar offline |
| ononline | Script a ser executado quando o navegador começar a funcionar online |
| onpagehide | Script a ser executado quando um usuário sai de uma página |
| onpageshow | Script a ser executado quando um usuário navega para uma página |
| onpopstate | Script a ser executado quando o histórico da janela for alterado |
| onresize | Evento disparado quando a janela do navegador é redimensionada |
| onstorage | Script a ser executado quando uma área de Armazenamento na Web é atualizada |
| onunload | Evento disparado quando uma página é descarregada (ou a janela do navegador é fechada) |
Estes eventos são acionados por ações dentro de um formulário HTML (aplica-se a quase todos os elementos HTML, mas é mais usado nos elementos do formulário):
| Atributo | Descrição |
|---|---|
| onblur | Evento disparado o momento em que o elemento perde o foco |
| onchange | Evento disparado o momento em que o valor do elemento é alterado |
| oncontextmenu | Script a ser executado quando um menu de contexto é acionado |
| onfocus | Evento disparado no momento em que o elemento fica em foco |
| oninput | Script a ser executado quando um elemento obtém entrada do usuário |
| oninvalid | Script a ser executado quando um elemento é inválido |
| onreset | Dispara quando o botão Redefinir(Reset) em um formulário é clicado |
| onsearch | Dispara quando o usuário escreve algo em um campo de pesquisa(para <input ="search">) |
| onselect | Dispara após a seleção de algum texto em um elemento |
| onsubmit | Dispara quando um formulário é enviado (Submitted) |
Pode parecer burrice mas lembre-se que os eventos acima para funcionarem precisam estar dentro de um form e os eventos desse form dispararão eventos específicos ligados a ele ( podemos ter mais de um form no html na mesma página ).
| Atributo | Descrição |
|---|---|
| onkeydown | Evento disparado quando um usuário está pressionando uma tecla |
| onkeypress | Evento disparado quando um usuário pressiona uma tecla |
| onkeyup | Evento disparado quando um usuário libera uma tecla |
Esses eventos são interessantes, por exemplo, quando queremos auxiliar um usuário ao preencher um formulário. Para ir de um campo para outro ou fazemos automaticamente quando o campo anterior é preenchido ou podemos interceptar a tecla enter e trocar ela pela tecla tab. Para o usuário isso ajuda muito.
| Atributo | Descrição |
|---|---|
| onclick | Evento disparado quando o elemento é clicado com o mouse |
| ondblclick | Evento disparado quando o elemento é clicado com o mouse duas vezes |
| onmousedown | Evento disparado quando um botão do mouse é pressionado no elemento (mas não liberado) |
| onmousemove | Evento disparado quando o ponteiro do mouse está se movendo sobre um elemento |
| onmouseout | Evento disparado quando o ponteiro do mouse sai do elemento |
| onmouseover | Evento disparado quando o ponteiro do mouse se move sobre o elemento |
| onmouseup | Evento disparado quando um botão do mouse é liberado sobre o elemento |
| onmousewheel | Descontinuada. Use o atributo onwheel |
| onwheel | Evento disparado quando o botão de rolagem do mouse rola para cima ou para baixo sobre o elemento |
| Atributo | Descrição |
|---|---|
| ondrag | Script a ser executado quando um elemento é arrastado |
| ondragend | Script a ser executado no final de uma operação de arrastar |
| ondragleave | Script a ser executado quando um elemento deixa um destino de recebimento válido |
| ondragover | Script a ser executado quando um elemento está sendo arrastado sobre um destino de recebimento válido |
| ondragstart | Script a ser executado no início de uma operação de arrastar |
| ondrop | Script a ser executado quando o elemento arrastado estiver sendo descartado |
| onscroll | Script a ser executado quando a barra de rolagem de um elemento está sendo rolada |
Os eventos acima são muito bons quando unidos ao clipboard do sistema operacional. Sendo assim ao invés de ter que digitar, por exemplo, um conjunto de itens ( como nomes de arquivos ) podemos selecionar ele de outra fonte e arrastar para a janela destinada ao dado na página. Com isto podemos mover imagens, nomes de arquivos, textos etc sem ter que digitar novamente um a um...o clipboard é muito versátil.
| Atributo | Descrição |
|---|---|
| oncopy | Evento disparado quando o usuário copia o conteúdo do elemento |
| oncut | Evento disparado quando o usuário recorta o conteúdo do elemento para ser colado futuramente em outro lugar |
| onpaste | Evento disparado quando o usuário cola algum conteúdo no elemento |
Esses eventos são muito interessantes quando desejamos mudar a natureza do que está sendo copiado. Por exemplo, eu cliquei numa imagem e arrasto para um campo texto. Lógicamente não quero copiar a imagem mas sim o nome dela. Estes eventos permitem essa 'translação' de tipo de item.
Este eventos são acionados por mídias como vídeos, imagens e áudio (se aplica a todos os elementos HTML, mas é mais comum em elementos de mídia, como <audio>, <embed>, <img>, <object> e <video>).
| Atributo | Descrição |
|---|---|
| onabort | Script a ser executado em anular (abort) |
| oncanplay | Script a ser executado quando um arquivo está pronto para começar a jogar (quando ele tem buffer suficiente para começar) |
| oncanplaythrough | Script a ser executado quando um arquivo pode ser reproduzido todo o caminho até o final sem pausar para armazenamento em buffer |
| oncuechange | Script a ser executado quando a sugestão muda em um elemento de< Track> |
| ondurationchange | Script a ser executado quando o comprimento da mídia muda |
| onemptied | Script para ser executado quando algo ruim acontece e o arquivo está de repente indisponível (como desconecta inesperadamente) |
| onended | Script a ser executado quando a mídia chegar ao fim (um evento útil para mensagens como "Obrigado por ouvir") |
| onerror | Script a ser executado quando ocorre um erro quando o arquivo está sendo carregado |
| onloadeddata | Script a ser executado quando os dados de mídia são carregados |
| onloadedmetadata | Script a ser executado quando os meta-dados (como dimensões e duração) são carregados |
| onloadstart | Script a ser executado assim como o arquivo começa a carregar antes de qualquer coisa é realmente carregado |
| onpause | Script a ser executado quando a mídia é pausada pelo usuário ou programaticamente |
| onplay | Script a ser executado quando a mídia está pronta para começar a jogar |
| onplaying | Script a ser executado quando a mídia realmente começou a tocar |
| onprogress | Script a ser executado quando o navegador está no processo de obter os dados de mídia |
| onratechange | Script a ser executado cada vez que a taxa de reprodução muda (como quando um usuário alterna para um modo de movimento lento ou avanço rápido) |
| onseeked | Script a ser executado quando o atributo buscando é definido como false indicando que a busca terminou |
| onseeking | Script a ser executado quando o atributo buscando é definido como true indicando que buscando está ativo |
| onstalled | Script a ser executado quando o navegador é incapaz de buscar os dados de mídia por qualquer motivo |
| onsuspend | O script a ser executado ao buscar os dados de mídia é interrompido antes de ser completamente carregado por qualquer motivo |
| ontimeupdate | Script a ser executado quando a posição de reprodução foi alterada (como quando o usuário avança rapidamente para um ponto diferente na mídia) |
| onvolumechange | Script a ser executado cada vez que o volume é alterado que (inclui a definição do volume para "Mute") |
| onwaiting | Script a ser executado quando a mídia fez uma pausa, mas é esperado para retomar (como quando a mídia pausa para buffer mais dados) |
| Atributo | Descrição |
|---|---|
| ontoggle | Evento disparado quando o usuário abre ou fecha o elemento <details> |
Se você está estudando HTML pratique o tratamento de todos os eventos e guarde na sua biblioteca de arquivos fontes. Vira e mexe você vai precisar dessas funcionalidades. Este assunto é de conhecimento obrigatório em testes de analistas desenvolvedores web.